<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div style="display: flex">
        <div v-show="showSearch" class="search" style="flex: 1">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="电子围栏名称" prop="name" label-width="100">
              <el-input style="width: 250px" v-model="queryParams.name" placeholder="请输入" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" border :data="farmList" @selection-change="handleSelectionChange" @cell-dblclick="cellDbClick">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column v-if="false" label="主键" align="center" prop="id" />
            <el-table-column label="电子围栏编码" align="center" width="200" prop="code"> </el-table-column>
            <el-table-column label="电子围栏名称" align="center" prop="name" />

          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </div>
        <div style="flex: 1; margin: 10px">
          <AmapFence @save="handleMapFence" :eFences="contents" disable="false" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup name="Leave" lang="ts">
import { listEFence } from '@/api/farm/index';
import { EFenceQuery, EFenceVO } from '@/api/farm/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import AmapFence from '@/components/map/AmapFence.vue';

const farmList = ref<EFenceVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const contents = ref<Array<string | number>>([]);

const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

const data = reactive<PageData<PondForm, PondQuery>>({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10
  },
  rules: {}
});

const { queryParams } = toRefs(data);

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  const res = await listEFence(queryParams.value);
  const { data } = res;
  farmList.value = data.records;

  total.value = data.total;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.pageNo = 1;
  queryParams.value.name = undefined;

  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: EFenceVO[]) => {
  contents.value = selection.map((item) => item.content);

  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

//双击进行修改
const cellDbClick = (row, column, cell, event) => {
  // handleUpdate(row);
};

onMounted(() => {
  getList();
});
</script>
